<template>
  <div class="login-main">
    <el-row
      class="login-main-header"
      type="flex"
      justify="space-around"
    >
      <el-col :span="5">
        <img
          class="login-main-logo"
          src="../../assets/ycdm.png"
        />
      </el-col>
      <el-col
        :span="12"
        align="right"
      >
        <span class="introduce introduceMargin">APP下载</span>
        <span class="introduce">关于车商聪</span>
      </el-col>
    </el-row>
    <div class="login-main-main">
      <div class="login-main-contet">
        <div class="login-main-advertising"></div>
        <div class="login-main-account">
          <div class="login-title">欢迎登录</div>
          <div class="text">车商聪后台管理系统V1.01</div>

          <el-form
            class="login-form"
            autoComplete="on"
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-position="right"
          >
            <div v-if="loginType == '1'">
              <el-form-item label="账号">
                <el-input
                  class="usernamecss"
                  style="width: 90%"
                  name="username"
                  clearable
                  maxlength="30"
                  autoComplete="on"
                  type="text"
                  v-model="loginForm.username"
                  placeholder="请输入登录账号"
                />
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  name="password"
                  style="width: 90%"
                  clearable
                  show-password
                  maxlength="20"
                  class="usernamecss"
                  :type="passwordType"
                  @keyup.enter.native="keysubimt"
                  v-model="loginForm.password"
                  autoComplete="on"
                  placeholder="请输入登录密码"
                />
              </el-form-item>

            </div>
            <div v-if="loginType == '2'">
              <!-- 手机号码输入 -->
              <el-form-item
                label="手机号码"
                class="formItemPhone"
              >
                <el-input
                  class="usernamecss"
                  name="username"
                  clearable
                  maxlength="30"
                  autoComplete="on"
                  type="text"
                  v-model="loginForm.phone"
                  placeholder="请输入手机号码"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="phone"
                    className="svg-iconPhone"
                  ></svg-icon>
                </el-input>
              </el-form-item>
            </div>
            <div v-if="loginType == '3'">
              <!-- 验证码 -->
              <el-form-item
                label="验证码"
                class="formItemPhone"
              >
                <el-input
                  class="usernamecss"
                  name="username"
                  clearable
                  maxlength="30"
                  autoComplete="on"
                  type="text"
                  v-model="loginForm.verificationCode"
                  placeholder="请输入验证码"
                />
              </el-form-item>
            </div>
            <!--<el-form-item>-->
              <!--<div class="buttonPrto">-->
                <!--<span-->
                  <!--class="protocol margin10px"-->
                  <!--@click="phoneLogin"-->
                <!--&gt;{{loginMethodName}}<i class="el-icon-arrow-right" /></span>-->
                <!--<el-checkbox-->
                  <!--v-model="protocol"-->
                  <!--class="protocol"-->
                <!--&gt;-->
                  <!--<span class="protocol">请先阅读并同意<a-->
                      <!--href="_targe"-->
                      <!--class="protocol"-->
                    <!--&gt;《用户协议》</a></span>-->
                <!--</el-checkbox>-->
              <!--</div>-->
            <!--</el-form-item>-->
          </el-form>
          <el-button
            type="primary"
            @click="handleLogin"
            class="loginbuttoncss"
            :loading="loading"
          >
            {{
              loginType == '1'
                ? $t('login.logIn')
                : loginType == '2'
                ? $t('login.send')
                : $t('login.verification')
            }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  isvalidUsername
} from '@/utils/validate'
// import LangSelect from '@/components/LangSelect'//语言选择
// import SocialSign from './socialsignin'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import SvgIcon from '@/components/SvgIcon'

export default {
  components: {
    ElCol,
    ElRow,
    // LangSelect,
    // SocialSign,
    SvgIcon,
  },
  name: 'login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码至少6位'))
      } else {
        callback()
      }
    }
    return {
      loginType: '1', //默认账号密码  2手机号输入 3手机号验证
      loginMethodName: '手机验证码登录',
      loginForm: {
        username: '',
        password: '',
        phone: '',
        verificationCode: '', //验证码
      },
      loginRules: {
        username: [{
          required: true,
          trigger: 'blur',
          validator: validateUsername,
        },],
        password: [{
          required: true,
          trigger: 'blur',
          validator: validatePassword,
        },],
      },
      protocol: true, //协议是否选中
      showeye: false,
      passwordType: 'password',
      loading: false,
      showDialog: false,
      tel: '1',
      qq: '1',
      www: '1',
    }
  },
  methods: {
    //手机号码登录
    phoneLogin () {
      if (this.loginType === '1') {
        this.loginType = '2'
        this.loginMethodName = '账号登录'
      } else {
        this.loginType = '1'
        this.loginMethodName = '手机验证码登录'
      }
    },
    showPwd () {
      this.showeye = !this.showeye
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },

    handleLogin (event) {
      if (this.protocol) {
        if (this.loginType == '1') {
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store
                .dispatch('login', this.loginForm)
                .then((res) => {
                  this.loading = false
                  if (res.success) {
                    this.$message.success('登录成功');
                    this.$router.push({
                      name: '/',
                    })
                  }
                })
                .catch(() => {
                  this.loading = false
                })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        } else if (this.loginType == '2') {
          this.loginType = '3'
        } else if (this.loginType == '3') {
          this.loginType = '1';
          this.$message.error('暂时无法用手机号登录')
        }
      } else {
        this.$message.error('请先勾选用户协议')
      }
    },
    afterQRScan () {
      // const hash = window.location.hash.slice(1)
      // const hashObj = getQueryObject(hash)
      // const originUrl = window.location.origin
      // history.replaceState({}, '', originUrl)
      // const codeMap = {
      //   wechat: 'code',
      //   tencent: 'code'
      // }
      // const codeName = hashObj[codeMap[this.auth_type]]
      // if (!codeName) {
      //   alert('第三方登录失败')
      // } else {
      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
      //     this.$router.push({ path: '/' })
      //   })
      // }
    },
    addKey (func) {
      document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0]
        if (e && e.keyCode == 13) {
          // enter 键
          //要做的事情
          func(event)
        }
      }
    },
  },
  mounted () {
    this.addKey(this.handleLogin)
  },
  destroyed () {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #20a0ff;
$black: black;

.login-main {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-image: url('../../assets/backgroundimg.png');

  .login-main-header {
    position: fixed;
    width: 100%;
    margin-top: 56px; //header整体距离顶部的距离
    height: 31px;
    line-height: 31px;

    .login-main-logo {
      width: 160px;
      height: 52px;
      object-fit: cover;
    }

    .introduce {
      font-size: 18px;
    }

    .introduceMargin {
      margin-right: 63px;
    }
  }

  .login-main-main {
    position: absolute;
    height: 100vh;
    width: 100vw;
    // border: 1px solid yellowgreen;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-main-contet {
      //登录框
      // border: 1px solid red;
      width: 820.6px;
      height: 450px;
      background-position: center;
      background-size: cover;
      background-image: url('../../assets/them.png');
      display: flex;
      align-items: center;
      border-radius:0 7px 7px 0;

      .login-main-advertising {
        //广告
        // border: 1px solid yellow;
        width: 527.2px;
        height: 367.6px;
        margin-left: -131px;
        background-position: center;
        background-size: cover;
        background-image: url('../../assets/publicity.png');
        border-radius: 5px;
      }

      .login-main-account {
        // border: 1px solid black;
        width: 380px;
        height: 367.6px;
        margin-left: 35px;
        position: relative;

        .login-title {
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .text {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-top: 9px;
          margin-bottom: 18px;
        }

        .login-form {
          margin-top: 10px;

          /deep/ .el-checkbox__label {
            padding: 2px;
          }

          /deep/ .el-form-item {
            margin-bottom: 10px;
          }

          /deep/ .el-input--medium {
            font-size: 14px;
          }

          /deep/ .el-form-item__label {
            line-height: 30px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #333333;
            margin-bottom: 5px;
          }

          /deep/ .el-input__inner {
            border-radius: 25px;
            background: #f5f5f5;
            border-width: 0;
            height: 45px;
            padding-left: 20px;
          }

          /deep/ .el-input__suffix{
            width: 30px;
          }

          .buttonPrto {
            display: flex;
            justify-content: space-between;

            .protocol {
              font-size: 10px;
              color: #666666;

              a {
                color: $bg;
              }
            }
          }
        }
      }
    }
  }
}

.loginbuttoncss {
  width: 360px;
  height: 50px;
  background: linear-gradient(90deg, #289be1, #128ad2);
  border-radius: 34px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  left: 0;
  bottom: 0;
  // height: 367.6px;
}

.margin10px {
  margin-right: 20px;
}

.formItemPhone {
  margin-top: 50px;
}

.svg-iconPhone {
  font-size: 18px;
}
</style>
